<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>商城首页</title>
</head>
<body>
<h2>这是我的购物商城首页</h2>
<div id="box">
    <template v-if="goods.length">
        <table border="1" cellspacing="0">
            <tr>
                <td>编号</td>
                <td>商品名称</td>
                <td>单价</td>
                <td>数量</td>
                <td>小计</td>
            </tr>
            <tr v-for="(it,i) in goods">
                <td>{{it.id}}</td>
                <td>{{it.name}}</td>
                <td>￥{{it.price}}</td>
                <td>
                    <button>-</button>{{goods[i].selectCount}}<button
                        v-on:click="add(i)"
                        v-bind:disabled="goods[i].selectCount>=goods[i].count"
                >
                    +
                </button>
                </td>
                <td>￥{{goods[i].xj}}</td>
            </tr>
        </table>
        <h3>您的商品总价为：{{total}},<button v-on:click="pay">现在支付</button></h3>
    </template>
    <template v-else>
        <div>亲，本商城商品还没有上架，后台小哥正在添加中。。。。</div>
    </template>
</div>
<script src="js/vue.js"></script>
<script src="js/axios.js"></script>
<script>
    new Vue({
        el: "#box",
        methods: {
            pay:function () {
              //发起ajax 访问后台支付接口
            },
            add: function (x) {
                if (this.goods[x].selectCount < this.goods[x].count) {
                    this.goods[x].selectCount++;
                    this.goods[x].xj=this.goods[x].xj+this.goods[x].price;
                    this.total=this.total+this.goods[x].price;
                }
            },
        },
        data: {
            goods: [],
            total: 0
        },
        mounted:function (){
            axios({
                method:'get',
                url:'/getAllGoodses',
            }).then((res)=>{
                this.goods=res.data;
                for(var i=0;i<this.goods.length;i++){
                    var obj=this.goods[i];
                    var key1='xj';
                    var key2='selectCount'
                    obj[key1]=0;
                    obj[key2]=0;
                }
            })
        }
    });
</script>
</body>
</html>